<template>

  <comNavigation>
    <template #title>
      <div class="title">
        疾病查询
      </div>
    </template>
  </comNavigation>
  <div>
    <div class="selectBox" @click="router.push('/search')">
      <comIcon style="font-size: 18px;vertical-align: middle;" name="icons-搜索" />
      搜一搜：疾病/症状/医生/健康知识
    </div>
    <div style="margin-top: 50px;display: inline-block;height: 90vh;overflow: hidden;overflow: auto;">
      <van-sidebar v-model="active">
        <van-sidebar-item @click="setData(item.id)" v-for="item in leftList" :title="item.name" />
      </van-sidebar>
    </div>
    <div class="rigth">
      <p @click="router.push({path:'/illnessDetail',query:{id:item.id}})" v-for="item in rightList">{{ item.name }}</p>
    </div>

  </div>
</template>


<script setup lang="ts">
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue'
import { useRouter } from 'vue-router';
const router = useRouter()
import { ref, onMounted } from 'vue'
const active = ref(0);
import comIcon from '../components/common/com-icon/com-icon.vue'

// 左侧数据接口
import { getDepAAPI, getPatientDiseaseAPI } from '@/api/home'
const leftList = ref()
const rightList = ref()
onMounted(async () => {
  const res = await getDepAAPI()
  leftList.value = res.data.data
  const res1 = await getPatientDiseaseAPI(leftList.value[0].id)
  rightList.value = res1.data.data
})

const setData = async (id:string)=>{
  const res1 = await getPatientDiseaseAPI(id)
  rightList.value = res1.data.data
}
</script>

<style scoped lang="scss">
.selectBox {
  position: absolute;
  background-color: #FFFFFF;
  left: 5%;
  top: 65px;
  width: 90%;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  text-indent: 8px;
  font-size: 16px;
  color: #B1B1B1;
  border: 2px solid #F5F5F5;
}

.rigth {
  width: 290px;
  height: 90vh;
  display: inline-block;
  margin-top: 50px;
  overflow: hidden;
  overflow: auto;

  p {
    padding: 10px;
  }
}
</style>
